<template>
    <div class="efficiency-analysis">
      <h2>处理效率分析</h2>
      
      <!-- 按工单类型分析 -->
      <el-card style="margin-bottom: 20px">
        <template #header>
          <div class="card-header">
            <span>按工单类型分析</span>
          </div>
        </template>
        <el-table :data="typeEfficiency" style="width: 100%">
          <el-table-column prop="type" label="工单类型"></el-table-column>
          <el-table-column prop="count" label="工单数量"></el-table-column>
          <el-table-column prop="avgTime" label="平均处理时间（小时）"></el-table-column>
          <el-table-column prop="completionRate" label="完成率"></el-table-column>
        </el-table>
      </el-card>
  
      <!-- 按处理人员分析 -->
      <el-card>
        <template #header>
          <div class="card-header">
            <span>按处理人员分析</span>
          </div>
        </template>
        <el-table :data="handlerEfficiency" style="width: 100%">
          <el-table-column prop="handler" label="处理人员"></el-table-column>
          <el-table-column prop="count" label="工单数量"></el-table-column>
          <el-table-column prop="avgTime" label="平均处理时间（小时）"></el-table-column>
          <el-table-column prop="completionRate" label="完成率"></el-table-column>
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  
  // 按工单类型分析数据
  const typeEfficiency = ref([
    { type: '系统维护', count: 25, avgTime: 2.5, completionRate: '92%' },
    { type: '用户反馈', count: 30, avgTime: 3.2, completionRate: '85%' },
    { type: '功能优化', count: 20, avgTime: 4.0, completionRate: '78%' },
    { type: '性能优化', count: 15, avgTime: 3.5, completionRate: '88%' },
    { type: '安全更新', count: 38, avgTime: 2.0, completionRate: '95%' }
  ])
  
  // 按处理人员分析数据
  const handlerEfficiency = ref([
    { handler: '张三', count: 45, avgTime: 2.8, completionRate: '90%' },
    { handler: '李四', count: 35, avgTime: 3.2, completionRate: '85%' },
    { handler: '王五', count: 28, avgTime: 3.5, completionRate: '80%' },
    { handler: '赵六', count: 20, avgTime: 4.0, completionRate: '75%' }
  ])
  </script>
  
  <style scoped>
  .efficiency-analysis {
    padding: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>